<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>轮播</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.scrollBanner{
				position: relative;
				overflow: hidden;
				width: 400px;
				height: 320px;
				margin: 0 auto;
			}
			.bannerBox{
				position: absolute;
				width: 2400px;
				height: 320px;
			}
			.bannerBox li{
				float: left;
			}
			.bannerBox li a{
				font-size: 60px;
				font-weight: 900;
			}
			.bannerBox li a img{
				width: 400px;
				height: 320px;
				display: block;
			}
			.btn{
				display: inline-block;
				position: absolute;
				top: 50%;
				    width: 54px;
    			height: 56px;
    			margin-top: -28px;
				background: url('btn.gif') no-repeat;
				opacity: 0.5;
			}
			.btn:hover{
				cursor: pointer;
				opacity: 1;
			}
			.leftPrev{
				left: 10px;
				background-position: -7px top;
			}
			.rightNext{
				right: 10px;
				background-position: left -62px;
			}
			.num{
				display: inline-block;
				position: absolute;
				bottom: 0;
				width: 100%;
    			height: 36px;
    			margin-top: -28px;
    			text-align: right;
    			background-color: rgba(123,123,123,0.8);
			}
			.num span{
				display: inline-block;
				width: 12px;
				background-color: #F18A00;
				height: 12px;
				margin-right: 6px;
				border-radius: 50%;
				-webkit-border-radius: 50%;
				box-sizing: border-box;
			}
			.num span:hover,.current{
				cursor: pointer;
				border: 2px solid #ffd;
			}
		</style>
	</head>
	<body>
		<div class="scrollBanner">
			<ul class="bannerBox">
				<li><a href="javascript:;"><img src="1.jpg" /></a></li>
				<li><a href="javascript:;"><img src="2.jpg" /></a></li>
				<li><a href="javascript:;"><img src="3.jpg" /></a></li>
				<li><a href="javascript:;"><img src="4.jpg" /></a></li>
				<li><a href="javascript:;"><img src="5.jpg" /></a></li>
				<li><a href="javascript:;"><img src="6.jpg" /></a></li>
			</ul>
			
			<a class="btn leftPrev" title="上一张"></a>
			<a class="btn rightNext" title="下一张"></a>
			<div class="num">
				<span class="current"></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
				<span class=""></span>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var duration;
			var playTime;
			
			banner(duration,playTime)
		});
		
		function banner(duration,playTime){
			var $newLi = $(".scrollBanner li").eq(0).clone();
			$(".bannerBox").append($newLi);
			var $oUL = $(".bannerBox");
			var $oLIs = $oUL.children();
			var $oNavlist = $(".num").children();
			var $prev = $(".leftPrev");
			var $Next = $(".rightNext");
			var index = 0;
			var imgLenth = $oLIs.length - 1;
			
			$Next.on("click",function(){
				index++;
				if(index > imgLenth){
					index = 1;
					$oUL.css({"left":0+"px"})
				}
				move(index);
			})
			$prev.on("click",function(){
				index--;
				if(index < 0){
					index = 2;
					$oUl.css({"left":-(imgLength)*$oLIs.eq(0).width()+"px"})
				}
				move(index);
			})
			
			function move(index){
				$oUL.stop().animate({
					"left":index*(-$oLIs.eq(0).width())+"px"
				},playTime);
				$oNavlist.removeClass("current");
				$oNavlist.eq(index >= imgLenth?0:index).addClass("current");
			}
		}
	</script>
</html>
